> ## Documentation Index
> Fetch the complete documentation index at: https://sequence-0fb8d9e6-api_docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started with Marketplace SDK

> Learn how to integrate Marketplace SDK into your application with guidance on installation, configuration, and implementing the make offer feature

# Getting Started

Let's create a simple React application that can display and interact with collectibles. We'll set up wallet connection and basic collectible viewing functionality.

<Steps>
  <Step title="Create a Project in Sequence Builder">
    Before you begin coding, you'll need to set up your project:

    1. Go to [Sequence Builder](https://sequence.build)
    2. Create a new project
    3. Follow our [White-label Marketplace Guide](https://docs.sequence.xyz/solutions/payments/marketplace/overview)
    4. Note down your Project ID and API Access Key
  </Step>

  <Step title="Create a New React Project">
    We'll use Vite with React and TypeScript for this guide. You can use any package manager, but we'll use pnpm in our examples:

    ```bash theme={null}
    # Create a new project
    pnpm create vite@latest my-marketplace-app -- --template react-ts

    # Navigate to the project directory
    cd my-marketplace-app

    # Install dependencies
    pnpm install
    ```
  </Step>

  <Step title="Install Required Dependencies">
    Install the Marketplace SDK and its peer dependencies:

    ```bash theme={null}
    pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query
    ```
  </Step>

  <Step title="Create SDK Configuration">
    Create a new file `src/config/sdk.ts` to store your SDK configuration:

    ```tsx theme={null}
    import type { SdkConfig } from "@0xsequence/marketplace-sdk";

    export const sdkConfig = {
      projectId: "YOUR_PROJECT_ID",
      projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
    } satisfies SdkConfig;
    ```

    <Check>
      Make sure to replace `YOUR_PROJECT_ID` and `YOUR_PROJECT_ACCESS_KEY` with your actual project credentials. You can find your Project ID at `https://sequence.build/project/{YOUR_PROJECT_ID}/overview` and your Project Access Key at `https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys` in the [Sequence Builder](https://sequence.build) dashboard.
    </Check>
  </Step>

  <Step title="Set Up Providers">
    Create a new file `src/providers.tsx` to configure the necessary providers:

    ```tsx theme={null}
    import {
      MarketplaceProvider,
      MarketplaceQueryClientProvider,
      ModalProvider,
      createWagmiConfig,
      getQueryClient,
      marketplaceConfigOptions,
    } from "@0xsequence/marketplace-sdk/react";
    import { useQuery } from "@tanstack/react-query";
    import { WagmiProvider } from "wagmi";
    import {
      SequenceConnectProvider,
      type ConnectConfig,
    } from "@0xsequence/connect";
    import { sdkConfig } from "./config/sdk";

    interface ProvidersProps {
      children: React.ReactNode;
    }

    export default function Providers({ children }: ProvidersProps) {
      const queryClient = getQueryClient();
      const { data: marketplaceConfig, isLoading } = useQuery(
        marketplaceConfigOptions(sdkConfig),
        queryClient
      );

      if (isLoading) {
        return <div>Loading configuration...</div>;
      }

      if (!marketplaceConfig) {
        return <div>Failed to load marketplace configuration</div>;
      }

      const connectConfig: ConnectConfig = {
        projectAccessKey: sdkConfig.projectAccessKey,
        signIn: {
          projectName: marketplaceConfig.settings.title,
        },
      };

      const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig);

      return (
        <WagmiProvider config={wagmiConfig}>
          <MarketplaceQueryClientProvider>
            <SequenceConnectProvider config={connectConfig}>
              <MarketplaceProvider config={sdkConfig}>
                {children}
                <ModalProvider />
              </MarketplaceProvider>
            </SequenceConnectProvider>
          </MarketplaceQueryClientProvider>
        </WagmiProvider>
      );
    }
    ```
  </Step>

  <Step title="Update Main Entry Point">
    Update your `main.tsx` to use the Providers component:

    ```tsx theme={null}
    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App'
    import Providers from './providers'
    import './index.css'

    ReactDOM.createRoot(document.getElementById('root')!).render(
      <React.StrictMode>
        <Providers>
          <App />
        </Providers>
      </React.StrictMode>
    )
    ```
  </Step>

  <Step title="Create Collectible Card Component">
    Create a new component `src/components/CollectibleCard.tsx` to display and interact with collectibles:

    ```tsx theme={null}
    import {
    useCollectible,
    useMakeOfferModal,
    useMarketplaceConfig,
    useOpenConnectModal,
    } from "@0xsequence/marketplace-sdk/react";
    import type { Address } from "viem";
    import { useAccount } from "wagmi";

    export default function CollectibleCard() {
    const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } = useMarketplaceConfig();
    const { isConnected } = useAccount()
    const { openConnectModal } = useOpenConnectModal()

    const collection = marketplaceConfig?.market.collections[0];
    const chainId = collection?.chainId as number;
    const collectionAddress = collection?.itemsAddress as Address;
    const collectibleId = "0";

    const { data: collectible, isLoading: isCollectibleLoading, error: collectibleError } = useCollectible({
    chainId,
    collectionAddress,
    collectibleId,
    });

    const { show } = useMakeOfferModal();

    if (isMarketplaceConfigLoading || isCollectibleLoading) return <div>Loading...</div>;
    if (collectibleError) return <div>Error: {collectibleError.message}</div>;
    if (!collectible) return <div>No collectible found</div>;

    return (
    <div>
      <img width={200} height={200} src={collectible.image} alt={collectible.name} />
      <h3>{collectible.name}</h3>
      {isConnected ? (
        <button
          onClick={() => {
            show({
              chainId,
              collectionAddress,
              collectibleId,
            });
          }}
        >
          Make Offer
        </button>
      ) : (
        <button onClick={() => openConnectModal()}>Connect Wallet</button>
      )}
    </div>
    );
    }
    ```

    <Note>
      Make sure you have minted at least one collectible in your collection, then use that collectible's ID as the `collectibleId`
    </Note>

    <Tip>
      While Sequence Connect is recommended for the best experience, you can use other wallet providers with the Marketplace SDK. For custom wallet connectors, see our guide on [custom connectors](/sdk/web/wallet-sdk/embedded/custom-connectors).
    </Tip>
  </Step>

  <Step title="Update App Component">
    Update your `App.tsx` to use the new components:

    ```tsx theme={null}
    import NFTCard from "./nft-card";

    export default function App() {
    return (
        <NFTCard />
    );
    }
    ```
  </Step>

  <Step title="Run Your Application">
    Start your development server:

    ```bash theme={null}
    pnpm run dev
    ```

    Your marketplace application will be running at `http://localhost:5173`. You can now:

    1. Connect your wallet using the connect button
    2. View collectible details
    3. Make offers on the collectible using the Make Offer button
  </Step>
</Steps>

## Next Steps

Now that you have the basics working, you can:

* Create collectible listings
* Manage orders
* Customize the UI
* Check out our other guides for more features

Need help? Join our [Discord community](https://discord.gg/sequence).